<template>
  <div class="search-page-form-header">
    <span class="search-page-form-header-bgc"></span>
    <span class="search-page-form-header-title">{{title}}</span>
    <div class="search-page-form-header-custom">
      <slot></slot>
    </div>
    <span class="search-page-form-header-return"
          @click="clickBack">返回</span>
  </div>
</template>

<script>
export default {
  name: "RmdsFormBack",
  props: {
    title: {
      type: String
    },
    backParams: {
      type: Object
    },
    backQuery: {
      type: Object
    },
    beforeGoBackHook: {
      type: Function,
    },
    goBack: {
      type: Function,
    }
  },
  methods: {
    //点击返回
    clickBack() {
      if (this.goBack) {
        this.goBack()
      } else {
        if (this.beforeGoBackHook) {
          this.beforeGoBackHook()
        }
        let currentTagId = this.$store.state.tagNav.activeTagNav.id
        let currentFuncHistory = this.$store.state.keepAlive.keepAliveList.filter(item => item.id === currentTagId)
        let backRoute = currentFuncHistory[currentFuncHistory.length - 2]
        if (Object.keys(backRoute.route.query).length > 0) {
          this.$router.push({
            path: backRoute.route.path,
            query: {
              ...backRoute.route.query,
              ...this.backQuery
            },
          })
        } else {
          this.$router.push({
            name: backRoute.route.name,
            params: {
              ...backRoute.route.params,
              ...this.backParams,
              handleFault: true
            },
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search-page-form-header-custom {
  display: inline-block;
  width: calc(100% - 205px);
  height: 100%;
  margin-left: 20px;
}
</style>